<template>
  <div>
    <el-row>
      <div style="margin-top: 15px;">
        <el-input
          placeholder="请输入内容"
          v-model="input"
          class="input-with-select"
        >
          <el-select v-model="type" slot="prepend" placeholder="请选择" @change="search">
            <el-option label="全部" value=""></el-option>
            <el-option
              :label="item.type"
              :value="item.type"
              v-for="(item, i) in $store.state.classType.classtype"
              :key="i"
            ></el-option>
          </el-select>
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="search"
          ></el-button>
        </el-input>
      </div>
    </el-row>
    <el-table :data="CLassList" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="id">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="封面">
              <img :src="props.row.cover_img" alt="" />
            </el-form-item>
            <el-form-item label="课程名">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="所属分类">
              <span>{{ props.row.type }}</span>
            </el-form-item>
            <el-form-item label="课程老师">
              <span>{{ props.row.teacher }}</span>
            </el-form-item>
            <el-form-item label="课程价格">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="课程描述">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
            <el-form-item label="发布者">
              <span>{{ props.row.author }}</span>
            </el-form-item>
            <el-form-item label="折扣">
              <span>{{ props.row.sale / 100 }}折</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品 ID" prop="id"> </el-table-column>
      <el-table-column label="商品名称" prop="name"> </el-table-column>
      <el-table-column label="分类" prop="type"> </el-table-column>
      <el-table-column label="操作">
        <template scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="edit(scope.row.id)"
            >编辑</el-button
          >
          <el-popconfirm
            title="确定删除吗？"
            @confirm="isDel(scope.row.id)"
          >
            <el-button type="danger" icon="el-icon-delete" size="mini" slot="reference"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑弹窗 -->
    <el-dialog title="编辑课程" :visible.sync="editVisible" width="50%">
      <el-row>
        课程名:<el-input v-model="editData.name"></el-input> 老师:<el-input
          v-model="editData.teacher"
        ></el-input>
        价格:<el-input v-model="editData.price"></el-input> 时长:<el-input
          v-model="editData.time"
        ></el-input>
        折扣:<el-input v-model="editData.sale"></el-input>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="editClass">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getClass,
  searchClass,
  getClassById,
  changeClass,
  delClass,
} from "../../api/class";
export default {
  created() {
    getClass().then((res) => {
      this.CLassList = res.data;
    });
    this.$store.dispatch("getType");
  },
  data() {
    return {
      editVisible: false,
      editData: [],
      input: "",
      type: "",
      CLassList: [],
    };
  },
  
  methods: {
    isDel(id) {
      delClass(id).then((res) => {
        this.$message({
          message: "删除完成",
          type: "success",
        });
         this.search();
      });
    },
    
    search() {
      searchClass(this.type, this.input).then((res) => {
        this.CLassList = res;
      });
    },
    edit(id) {
      this.editVisible = true;
      getClassById(id).then((res) => {
        this.editData = res.data;
      });
    },
    editClass() {
      changeClass(this.editData.id, this.editData).then(() => {
        this.$message({
          message: "修改成功",
          type: "success",
        });
        this.search();
        // this.CLassList.forEach((ele,i)=>{
        //   if(ele.id==this.editData.id){
        //     this.CLassList[i]=this.editData
        //   }
        // })
        this.editVisible = false;
      });
    },
  },
};
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand >>> label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
img {
  width: 50px;
  height: 50px;
}
.el-row {
  margin: 10px 0;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-input >>> .el-input-group__prepend {
  width: 70px !important;
}
</style>
